<template>
	<Echarts container="accepted-project-ratio" :options="chartOption()" :height="330" />
</template>
<script lang="ts" setup>
	import { ref, onMounted, watch } from 'vue'
	import { getDistribut } from '@/api/train'

	import * as echarts from 'echarts'
	import dayjs from 'dayjs'
	import { requireImg } from '@/utils/common'
	interface Props {
		data?: any
		legendLineHeight?: number
		chartType: any
	}

	const list: any = ref();
	const item: any = ref({
		"taxiCount": 88,
        "busCount": 66,
        "rideHailingCount": 44,
        "subwayCount": 22
	});

	const chartData: any = ref([])
	const legendLineHeight = ref(0)

	const props = withDefaults(defineProps<Props>(), {
		chartType: "1",
		data: () => [],
		// data: () => [
		// 	{
		// 		value: 114,
		// 		name: '出租车',
		// 		icon: 'image://' + requireImg('global/pipe-legend1.png'),
		// 		itemStyle: {
		// 			color: new echarts.graphic.LinearGradient(
		// 				1,
		// 				0,
		// 				0,
		// 				0,
		// 				[
		// 					{
		// 						offset: 0,
		// 						color: 'rgba(15, 84, 153, 0.396)',
		// 					},
		// 					{
		// 						offset: 1,
		// 						color: 'rgba(115, 208, 255, 1)',
		// 					},
		// 				],
		// 				false,
		// 			), // 渐变
		// 		},
		// 	},
		// 	{
		// 		value: 71,
		// 		name: '网约车',
		// 		icon: 'image://' + requireImg('global/pipe-legend2.png'),
		// 		itemStyle: {
		// 			color: new echarts.graphic.LinearGradient(
		// 				1,
		// 				0,
		// 				0,
		// 				0,
		// 				[
		// 					{
		// 						offset: 0,
		// 						color: 'rgba(77, 255, 181, 1)',
		// 					},
		// 					{
		// 						offset: 1,
		// 						color: 'rgba(11, 77, 44, 1)',
		// 					},
		// 				],
		// 				false,
		// 			), // 渐变
		// 		},
		// 	},
		// 	{
		// 		value: 80,
		// 		name: '公交',
		// 		icon: 'image://' + requireImg('global/pipe-legend3.png'),
		// 		itemStyle: {
		// 			color: new echarts.graphic.LinearGradient(
		// 				1,
		// 				0,
		// 				0,
		// 				0,
		// 				[
		// 					{
		// 						offset: 0,
		// 						color: 'rgba(229, 229, 229, 1)',
		// 					},
		// 					{
		// 						offset: 1,
		// 						color: 'rgba(117, 117, 117, 1)',
		// 					},
		// 				],
		// 				false,
		// 			), // 渐变
		// 		},
		// 	},
		// 	{
		// 		value: 75,
		// 		name: '地铁',
		// 		icon: 'image://' + requireImg('global/pipe-legend4.png'),
		// 		itemStyle: {
		// 			color: new echarts.graphic.LinearGradient(
		// 				1,
		// 				0,
		// 				0,
		// 				0,
		// 				[
		// 					{
		// 						offset: 0,
		// 						color: 'rgba(255, 200, 89, 1)',
		// 					},
		// 					{
		// 						offset: 1,
		// 						color: 'rgba(153, 105, 38, 1)',
		// 					},
		// 				],
		// 				false,
		// 			), // 渐变
		// 		},
		// 	},
		// ],
		legendLineHeight: 0,
	})

	const chartOption = () => {
		let opt = {
			tooltip: {
				trigger: 'item',
				backgroundColor: 'rgba(49, 59, 79, 0.8)',
				borderWidth: 1,
				borderColor: 'rgba(255, 255, 255, 0.2)',
				textStyle: {
					color: '#fff',
					fontSize: 30,
				},
			},
			legend: {
				orient: 'vertical',
				right: '20%',
				top: 'center',
				data: props.data,
				itemWidth: 20,
				itemHeight: 20,
				textStyle: {
					color: '#aaa',
					lineHeight: props.legendLineHeight,
					fontSize: 28,
					rich: {
						a: {
							color: '#fff',
							fontSize: 26,
							width: 140,
						},
						b: {
							color: '#fff',
							fontSize: 35,
						},
					},
				},
				formatter: function (name: any) {
					let tatol: any = props.data.reduce((prev: any, item: any) => prev + item.value, 0)
          if (tatol == 0) {
            return ` {a|${name}}{b|${0}} %`
          } else {
            let r: any = props.data.find((d: any) => d.name == name)!.value / tatol
            return ` {a|${name}}{b|${r.toFixed(2) * 100}} %`
          }
				},
			},
			graphic: {
				elements: [
					{
						type: 'image',
						style: {
							image: requireImg('global/pipe-img2.png'), //你的图片地址
							width: 300,
							height: 300,
						},
						left: '33.5%',
						top: 'center',
					},
					{
						type: 'image',
						style: {
							image: requireImg('global/pipe-img1.png'), //你的图片地址
							width: 300,
							height: 300,
						},
						left: '33.5%',
						top: 'center',
					},
				],
			},
			series: [
				{
					type: 'pie',
					center: ['33.5%', '50%'],
					radius: ['35%', '88%'],
					avoidLabelOverlap: false,
					padAngle: 5,
					itemStyle: {
						borderRadius: 0,
					},
					label: {
						show: false,
						position: 'center',
					},
					emphasis: {
						disabled: false,
						scale: false,
					},
					labelLine: {
						show: false,
					},
					data: props.data,
				},
			],
		}
		return opt
	}
	const option = ref({})
	onMounted(() => {
		console.log("chartTyps is ", props)
		if (props.chartType == "1") {
			option.value = {
				tooltip: {
					trigger: 'item',
					backgroundColor: 'rgba(49, 59, 79, 0.8)',
					borderWidth: 1,
					borderColor: 'rgba(255, 255, 255, 0.2)',
					textStyle: {
						color: '#fff',
						fontSize: 30,
					},
				},
				legend: {
					orient: 'vertical',
					right: '20%',
					top: 'center',
					data: props.data,
					itemWidth: 20,
					itemHeight: 20,
					textStyle: {
						color: '#aaa',
						lineHeight: props.legendLineHeight,
						fontSize: 28,
						rich: {
							a: {
								color: '#fff',
								fontSize: 26,
								width: 140,
							},
							b: {
								color: '#fff',
								fontSize: 35,
							},
						},
					},
					formatter: function (name: any) {
						let tatol: any = props.data.reduce((prev: any, item: any) => prev + item.value, 0)

						let r: any = props.data.find((d: any) => d.name == name)!.value / tatol
						return ` {a|${name}}{b|${r.toFixed(2) * 100}} %`
					},
				},
				graphic: {
					elements: [
						{
							type: 'image',
							style: {
								image: requireImg('global/pipe-img2.png'), //你的图片地址
								width: 300,
								height: 300,
							},
							left: '33.5%',
							top: 'center',
						},
						{
							type: 'image',
							style: {
								image: requireImg('global/pipe-img1.png'), //你的图片地址
								width: 300,
								height: 300,
							},
							left: '33.5%',
							top: 'center',
						},
					],
				},
				series: [
					{
						type: 'pie',
						center: ['33.5%', '50%'],
						radius: ['35%', '88%'],
						avoidLabelOverlap: false,
						padAngle: 5,
						itemStyle: {
							borderRadius: 0,
						},
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							disabled: false,
							scale: false,
						},
						labelLine: {
							show: false,
						},
						data: props.data,
					},
				]
			}
			console.log("options is ===", option.value)
		} else {

		}
	})
</script>

<style lang="scss" scoped></style>
